<template>
    <div class="pageCon">
        <div style="width: 90%;">
            <el-button @click="updatePasswordDialogVisible = true" type="primary">修改密码</el-button>
            <el-dialog title="修改密码" v-model="updatePasswordDialogVisible" width="30%">
                <el-form style="width: 80%;margin-top: 30px;" :model="updatePasswordForm" label-width="100px">
                    <el-form-item label="旧密码">
                        <el-input v-model="updatePasswordForm.oldPassword" type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码">
                        <el-input v-model="updatePasswordForm.newPassword" type="password"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="updatePasswordDialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="updatePassword">确 定</el-button>
                    </span>
                </template>
            </el-dialog>
            <el-date-picker style="margin-left: 10px;" v-model="dateRange" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" @change="handleDateChange" />
        </div>
        <el-table :data="tableData" border show-summary :summary-method="getSummaries"
            style="width: 90%; margin-top: 20px">
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="date" label="星期">
                <template #default="{ row }">
                    {{ '星期' + WEEKDAYENUM[new Date(row.date).getDay()] }}
                </template>
            </el-table-column>
            <el-table-column prop="breakfast" label="早餐">
                <template #default="{ row }">
                    <div>{{ row.breakfast ? '1' : '' }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="lunch" label="午餐">
                <template #default="{ row }">
                    <div>{{ row.lunch ? '1' : '' }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="dinner" label="晚餐">
                <template #default="{ row }">
                    <div>{{ row.dinner ? '1' : '' }}</div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination :current-page="pagination.currentPage" :page-size="pagination.pageSize" :total="pagination.total"
            layout="prev, pager, next" @current-change="handlePageChange" />
        <!-- <span>默认每页{{ pagination.pageSize }}条数据</span> -->
        <div style="display: flex;align-items: center;">
            一页显示
            <div style="padding: 0 4px;">
                <el-input-number v-model="pagination.pageSize" size="small" :min="1" :max="100"
                    style="width: 60px;padding: 0;" @change="handlePageChange(pagination.currentPage)"
                    :controls="false"></el-input-number>
            </div>条数据
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Api } from '@/api'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
const router = useRouter()
const useUser = useUserStore()
const tableData = ref([])
const dateRange = ref([])
const pagination = ref({
    currentPage: 1,
    pageSize: 30,
    total: 0
})
const updatePasswordDialogVisible = ref(false)
const updatePasswordForm = ref({
    oldPassword: '',
    newPassword: ''
})

function updatePassword() {
    Api.updatePassword({
        oldPassword: updatePasswordForm.value.oldPassword,
        password: updatePasswordForm.value.newPassword
    }).then(res => {
        if (res.status === 200) {
            ElMessage.success('修改密码成功')
            updatePasswordDialogVisible.value = false
            useUser.user = {}
            useUser.token = ''
            router.push('/login')
        } else {
            ElMessage.error('修改密码失败')
        }
    })
}

const user = ref({})
const WEEKDAYENUM = ['日', '一', '二', '三', '四', '五', '六']

function getSummaries(param) {
    const { columns, data } = param;
    const sums = [];
    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = '总计';
            return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                    return prev + curr;
                } else {
                    return prev;
                }
            }, 0);
        } else {
            sums[index] = '';
        }
    });

    return sums;
}

onMounted(() => {
    fetchUserData()
})

function handleDateChange() {
    fetchUserData()
}

function handlePageChange(newPage) {
    pagination.value.currentPage = newPage
    fetchUserData()
}

function fetchUserData() {
    const [firstDay, lastDay] = dateRange.value || {}
    Api.countUserDish({
        firstDay: firstDay ? new Date(new Date(firstDay).getTime() + 24 * 60 * 60 * 1000).toISOString().split('T')[0] : '2024-12-31',
        lastDay: lastDay ? new Date(new Date(lastDay).getTime() + 24 * 60 * 60 * 1000).toISOString().split('T')[0] : '2999-12-31',
        page: pagination.value.currentPage,
        pageSize: pagination.value.pageSize
    }).then(res => {
        if (res.data) {
            tableData.value = res.data
            pagination.value.total = res.totals
        } else {
            ElMessage.error('获取数据失败')
        }
    })
}
</script>

<style lang="scss" scoped>
.pageCon {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>